<template>
	<view class="home-box">
		<view class="home-page-header">
			<view class="header-position">
				<view class="icon-logo" :style="'margin-top:' + paddingTop + 'rpx;'">
					<image src="https://youpindou.com/miniProgram/image/showImg?imgUrl=/home/ypd/images/logo2.png"
						mode='aspectFill' lazy-load='true' />
				</view>
				<view class="search">
					<view style="width: 600rpx;" @click="$goPath(2, '/pages/premiumBag/goods/search?type=1')">
						<u-search placeholder="请输入你想搜索的内容" :showAction="false" bgColor="#fff"></u-search>
					</view>
					<view class="vip-code"
						@click="!userId ? $toast('您还未登录,请先去登录!') : $goPath(2, '/pages/premiumBag/home/vipCode')">
						<u-icon name="https://youpindou.com/miniProgram/image/showImg?imgUrl=/home/ypd/images/code.png" color="#000"
							size="24" class="icon"></u-icon>
						<text>会员码</text>
					</view>
				</view>
			</view>
			<view class="swiper-wrap">
				<u-swiper :list="bannerDTOList" :autoplay="true" duration="500" interval="5000" height="900rpx"
					@click="clickSwiper" />
			</view>
			<view class="header-banner" v-if="newList.length > 0" @click="$goPath(2, '/pages/premiumBag/home/newProduct')">
				<view class="banner-shops">
					<view v-for="(item, index) in newList" :key="index" class="banner-shops-items">
						<image :src="item.thumbnail" mode="widthFix" />
					</view>
				</view>
			</view>
			<view class="home-page-container">
				<view class="menus">
					<block v-for="(item, index) in menus" :key="index">
						<view class="menu-item" @click="goPath(item.url,index)">
							<image class="menu-item-img" :src="item.src" mode="aspectFit|aspectFill|widthFix" lazy-load="false" />
							<text class="menu-item-title">{{ item.title }}</text>
						</view>
					</block>
				</view>
				<view class="container-hot-shop" v-if="hotList.length > 0">
					<view class="hot-shop-title">热卖商品</view>
					<view class="hot-shop-list" :class="hotList.length == 2 ? 'hot-shop-list2' : ''">
						<view class="shopList" :class="hotList.length == 2 ? 'shopList2' : ''" v-for="(item, index) in hotList"
							:key="index">
							<view class="hotShop-img" @click="$goPath(2, `/pages/premiumBag/goods/goodsDetail?productId=${item.id}`)">
								<image :src="item.thumbnail" mode="aspectFit|aspectFill|widthFix" lazy-load="true" />
							</view>
							<view class="hot-price">
								特价 ￥<text>{{ item.showPrice }}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="goods-list-title">精选商品</view>
				<z-paging ref="paging" v-model="dataList" @query="queryList" :fixed="false" :use-page-scroll="true"
					use-page-scroll>
					<view class="goods-list-container">
						<block v-for="(item, index) in dataList" :key="index">
							<view class="goods-list">
								<view class="goods-list-img"
									@click="$goPath(2, `/pages/premiumBag/goods/goodsDetail?productId=${item.id}`)">
									<image :src="item.thumbnail" :lazy-load-margin="0" mode="aspectFit|aspectFill|widthFix"
										lazy-load="true" />
								</view>
								<view class="goods-list-text"><text>{{ item.name }}</text></view>
								<view class="goods-list-price">
									<view>
										￥
										<text>{{ item.showPrice }}</text>
										<text>{{ item.linePrice }}</text>
									</view>
									<view @click="onCollect(item)">
										<u-icon :name="item.collect == 1 ? 'heart-fill' : 'heart'"
											:color="item.collect == 1 ? '#EA5F5F' : '#BFBFBF'"></u-icon>
									</view>
								</view>
							</view>
						</block>
					</view>
				</z-paging>
			</view>
		</view>
		<u-popup :show="showLoading" @open="showLoading = true" mode="center" bgColor="transparent">
			<view class="loading_popup">
				<view class="loading_title">
					尊敬的用户：
				</view>
				<view class="loading_box" v-html="loadingValue">
				</view>
				<view class="loading_btn" @click="showLoading = false">
					确认
				</view>
			</view>
		</u-popup>
		<Loading :status="loading"></Loading>

		<tabbar :currentTab='0' :type="1" :scroll="scroll" ref="child" @scrollTop="scrollTop" />
	</view>
</template>
<script>
	import {
		menus
	} from '@/common/index.js';
	import {
		getUserInfo
	} from '@/common/auth';
	import ZPMixin from '@/uni_modules/z-paging/components/z-paging/js/z-paging-mixin'
	import Loading from '@/components/loading'
	export default {
		mixins: [ZPMixin],
		components: {
			Loading
		},
		data() {
			return {
				loading: false,
				paddingTop: 0,
				pageLoading: false,
				newList: [],
				userId: getUserInfo().ypdUser?.userId,
				menus,
				hotList: [],
				recommendList: [],
				bannerDTOList: [],
				goodsListLoadStatus: 0,
				navigation: {
					type: 'dots'
				},
				swiperImageProps: {
					mode: 'scaleToFill'
				},
				identifyCode: '',
				pageCurrent: 1,
				total: 0,
				dataList: [],
				scroll: 0,
				showLoading: false,
				loadingValue: ''
			}
		},
		onLoad(options) {
			const that = this
			//获取手机型号
			uni.getSystemInfo({
				success: function(res) {
					that.paddingTop = res.statusBarHeight + 44 //状态栏高度
				}
			})
			if(options && options.inviteCode) {
				uni.setStorageSync('inviteCode', options.inviteCode); //邀请码存本地缓存
			}
			this.getHomePage();
			// this.getisLoading();
			// this.getLoading();
		},
		onPageScroll(e) {
			this.$refs.child.printScroll(e.scrollTop);
			this.$refs.paging.updatePageScrollTop(e.scrollTop)
		},
		onReachBottom(e) {
			this.$refs.paging.pageReachBottom();
		},
		methods: {
			goPath(url, index) {
				console.log(index)
				// if(index == 2){
				// 	this.$goPath(3,url)
				// }else{
				// 	this.$goPath(2,url)
				// }
				this.$goPath(2, url)
			},
			// 获取公告弹窗是否弹出
			async getisLoading() {
				let pageWindow = uni.getStorageSync("pageWindow")
				let result = await this.$request.systemSettingsGet({
					key: 'home_page_windows_on'
				})
				if (result.data?.settingValue == '1' && pageWindow == '') {
					this.showLoading = true;
					uni.setStorageSync("pageWindow", 1)
				} else {
					this.showLoading = false;
				}
			},
			// 获取公告弹窗内容
			async getLoading() {
				let result = await this.$request.systemSettingsGet({
					key: 'home_page_windows'
				})
				this.loadingValue = '&nbsp&nbsp&nbsp&nbsp' + result.data?.settingValue;
			},
			// 滚动到顶部
			scrollTop(e) {
				uni.pageScrollTo({
					scrollTop: 0, // 滚动到页面的目标位置  这个是滚动到顶部, 0 
					duration: 300 // 滚动动画的时长
				})
			},
			// 轮播图
			clickSwiper(e) {
				this.$goPath(3, '/pages/pocketShop/home/index')
			},
			//下拉加载
			async queryList(pageNo, pageSize) {
				const {
					userId
				} = this;
				const param = {
					page: {
						current: pageNo,
						size: pageSize
					},
					query: {
						userId
					}
				}
				let result = await this.$request.miniFindByPage(param)
				this.$refs.paging.complete(result.data.records);
			},
			async getList() {
				const {
					userId
				} = this;
				const param = {
					page: {
						current: 1,
						size: 40
					},
					query: {
						userId
					}
				}
				let result = await this.$request.miniFindByPage(param)
				this.dataList = result.data.records
			},
			async getHomePage() {
				let lat = uni.getStorageSync('latitude');
				let lon = uni.getStorageSync('longitude');
				const {
					userId
				} = this;
				const param = {
					lat,
					lon,
					userId,
					allProductQuery: {
						size: 10,
					},
					hotProductQuery: {
						isHot: 1,
						size: 3
					},
					newProductQuery: {
						isNew: 1,
						size: 2
					}
				}
				this.loading = true
				let result = await this.$request.miniHomePage(param)
				const {
					bannerDTOList,
					hotList,
					newList,
					storeDTO = {}
				} = result.data; //allList
				let imgArr = [];
				bannerDTOList.map(item => {
					imgArr.push(item.image);
				});
				uni.setStorageSync('storeDTO', storeDTO);
				this.hotList = hotList
				this.newList = newList
				this.identifyCode = storeDTO?.identifyCode || ''
				this.bannerDTOList = imgArr
				this.loading = false
			},
			//收藏
			onCollect(item) {
				const {
					userId
				} = this;
				if (!userId) return this.$toast('您还未登录,请先去登录!')
				const param = {
					productUpId: item.id,
					userId
				}
				if (item.collect == 0 || item.collect == null) {
					this.$request.miniAddCollet(param).then(res => {
						if (res.code == 200) {
							this.getList()
							this.$toast('收藏成功!')
						}
					});
				} else {
					this.$request.miniCancelCollet(param).then(res => {
						if (res.code == 200) {
							this.getList()
							this.$toast('取消收藏成功!')
						}
					});
				}
			},
		},
	}
</script>
<style>
	page {
		height: 100%;
	}

	.home-box {
		width: 100%;
		min-height: 100vh;
		overflow: scroll;
		padding-bottom: calc(env(safe-area-inset-bottom) + 96rpx);
		box-sizing: border-box;
	}


	.home-box::-webkit-scrollbar {
		width: 4px;
		height: 4px;
		color: red;
	}

	.t-tabs.t-tabs--top .t-tabs__scroll {
		border-bottom: none !important;
	}

	.home-page-header {
		background: linear-gradient(#fff, #f5f5f5);
		/* height: 679.91rpx; */
	}

	.home-page-container {
		/* flex: 1; */
		background: linear-gradient(180deg, #FFFFFF 16%, #E5FEF7 48%, #E5FDF6 67%, #FFFFFF 82%, #F5F5F5 100%);
		padding: 0 24rpx;
		box-sizing: border-box;
		color: #333333;
	}

	.home-page-container,
	.home-page-header {
		display: block;
		box-sizing: border-box;
		position: relative;
	}

	.home-page-header .swiper-wrap {
		width: 100%;
		height: 100%;
		/* padding-top: 150rpx;
  box-sizing: border-box; */
		position: relative;
	}

	.header-position {
		width: 100%;
		position: absolute;
		z-index: 1100;
		left: 0;
	}

	.home-page-header .icon-logo {
		width: 100%;
		height: 65rpx;
		padding: 0 30rpx;
		box-sizing: border-box;
	}

	.home-page-header .icon-logo image {
		width: 220rpx;
		height: 60rpx;
		display: block;
		box-sizing: border-box;
	}

	.home-page-header .search {
		position: absolute;
		width: 100%;
		padding: 0 30rpx;
		box-sizing: border-box;
		margin-top: 24rpx;
		display: flex;
		align-items: center;
	}

	.home-page-header .search .t-search {
		flex: 1;
	}

	.home-page-header .t-search__input-container {
		border-radius: 32rpx !important;
		height: 64rpx !important;
	}

	.home-page-header .t-search__input {
		font-size: 28rpx !important;
		color: #666666 !important;
		font-size: 30rpx !important;
		font-weight: bold;
	}

	.search .vip-code {
		width: 60rpx;
		display: flex;
		flex-direction: column;
		color: #333;
		font-size: 20rpx;
		margin-left: 20rpx;
	}

	.vip-code .icon {
		padding-left: 5rpx;
	}

	.home-page-header .t-image__swiper {
		width: 100%;
		height: 300rpx;
		border-radius: 10rpx;
	}

	.home-page-header .t-search__input-box {
		background: #FFFFFF !important;
	}

	.t-swiper-host,
	.t-swiper__item image {
		width: 100%;
		/* height: 679rpx !important; */
		border-radius: 0% !important;
		box-sizing: border-box !important;
	}

	.header-banner {
		width: 100%;
		height: 220rpx;
		padding: 0 20rpx;
		box-sizing: border-box;
		position: absolute;
		top: 680rpx;
		left: 0;
		background-image: url(https://youpindou.com/miniProgram/image/showImg?imgUrl=/home/ypd/images/showImg.png);
		background-size: 100% 100%;
		background-repeat: no-repeat;
		/* 	animation: myMove .5s infinite alternate linear;
		-moz-animation: myMove .5s infinite alternate linear;
		-webkit-animation: myMove .5s infinite alternate linear;
		-o-animation: myMove .5s infinite alternate linear; */
	}

	.banner-shops {
		position: absolute;
		width: 100%;
		height: 140rpx;
		top: -20rpx;
		left: 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 39rpx;
		padding-top: 20rpx;
		box-sizing: border-box;
	}

	.banner-shops-items {
		width: 110rpx;
		height: 110rpx;
	}

	.banner-shops-items image {
		width: 100%;
		height: 100%;
		display: block;
		margin-top: 20rpx;
	}

	.menus {
		box-sizing: border-box;
		margin-top: 20rpx;
		margin-bottom: 10rpx;
		display: flex;
		flex-wrap: wrap;
		/* max-height: 248rpx; */
	}

	.menus .menu-item {
		width: 25%;
		height: 114rpx;
		display: flex;
		align-items: center;
		margin-bottom: 10rpx;
		flex-direction: column;
	}

	.menus .menu-item-img {
		width: 72rpx;
		height: 72rpx;
		display: block;

	}

	.menus .menu-item-title {
		font-size: 26rpx;
		color: #000;
		line-height: 40rpx;
		font-family: PingFang SC-Medium, PingFang SC;
	}

	.container-hot-shop {
		background-image: url('https://youpindou.com/miniProgram/image/showImg?imgUrl=/home/ypd/images/c42acd3b-1e90-49fe-a283-3890adbec440.png');
		background-size: 100% 100%;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		padding: 16rpx 24rpx 24rpx;
		box-sizing: border-box;

	}

	.container-hot-shop>image {
		width: 100%;
		height: 100%;
		display: block;
	}

	.container-hot-shop .hot-shop-title {
		line-height: 32rpx;
		margin-bottom: 24rpx;
		font-size: 35rpx;
		font-weight: bold;
	}

	/*
.container-hot-shop .hot-shop-title image {
  width: 100%;
  height: 100%;
  display: block;
} */

	.hot-shop-list {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: flex-end;
	}

	.hot-shop-list2 {
		justify-content: flex-start;
	}

	.shopList {
		width: 200rpx;
		height: 253rpx;
		background: #F9FFFF;
		border-radius: 16rpx;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		color: #EA5F5F;
		font-size: 24rpx;
		/* padding-bottom: 8rpx; */
		box-sizing: border-box;
	}

	.shopList2:nth-child(2) {
		margin-left: 20rpx;
	}

	.shopList .hotShop-img {
		width: 200rpx;
		height: 200rpx;
	}

	.shopList .hotShop-img image {
		width: 100%;
		height: 100%;
		display: block;
		border-radius: 16rpx 16rpx 0 0;
	}


	.shopList text {
		font-size: 36rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		line-height: 42rpx;
	}

	.goods-list-title {
		line-height: 32rpx;
		margin: 24rpx 0;
		/* margin-left: 24rpx; */
		font-size: 35rpx;
		font-weight: bold;
	}

	.goods-list-title image {
		width: 100%;
		height: 100%;
		display: block;
	}

	.goods-list-container {
		/* background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 13%, #FFFFFF 100%); */
		width: 100%;
		border-radius: 16rpx;
		padding: 24rpx 0;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-flow: row wrap;
	}

	.goods-list-container .goods-list {
		width: 320rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-bottom: 10rpx;
		box-sizing: border-box;
		box-shadow: 4rpx 4rpx 8rpx 0rpx rgba(0, 0, 0, 0.1);
		border-radius: 16rpx;
		font-size: 24rpx;
		margin-bottom: 24rpx;
	}

	.goods-list-container .goods-list .goods-list-img image {
		width: 320rpx;
		height: 320rpx;
		display: block;
		border-radius: 16rpx;
	}

	.loadingImgBox {
		transition: opacity 0.4s linear 0.4s;
	}

	.goods-list-text {
		height: 68rpx;
		margin-top: 20rpx;
		width: 100%;
		text-align: left;
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		-webkit-box-orient: vertical;
		padding: 0 24rpx;
	}

	.goods-list-text>text {
		display: block;
		width: 100%;
	}

	.goods-list-price {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		line-height: 47rpx;
		color: #EA5F5F;
		font-size: 28rpx;
		padding: 0 24rpx;
	}

	.goods-list-price>view:first-child>text:first-child {
		font-size: 40rpx;
		font-weight: bold;
	}

	.goods-list-price>view:first-child>text:last-child {
		font-size: 20rpx;
		font-weight: bold;
		text-decoration: line-through
	}

	.goods-list-price>view:last-child image {
		width: 28rpx;
		height: 24rpx;
		display: block;
	}

	.loading_title {
		padding-top: 20rpx;
	}

	.loading_popup {
		width: 600rpx;
		padding: 24rpx;
		background-color: #fff;
		border-radius: 20rpx;
	}

	.loading_popup .loading_box {
		overflow: auto;
		font-size: 30rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		color: #666666;
		line-height: 45rpx;
	}

	.loading_btn {
		width: 140rpx;
		line-height: 65rpx;
		background-color: #32B499;
		margin: 50rpx auto;
		text-align: center;
		font-size: 28rpx;
		color: #fff;
		border-radius: 10rpx;
	}

	@keyframes myMove {
		0% {
			transform: scale(.9)
		}

		100% {
			transform: scale(1)
		}
	}

	@-moz-keyframes myMove {
		0% {
			transform: scale(.9)
		}

		100% {
			transform: scale(1)
		}
	}

	@-webkit-keyframes myMove {
		0% {
			transform: scale(.9)
		}

		100% {
			transform: scale(1)
		}
	}

	@-o-keyframes myMove {
		0% {
			transform: scale(.9)
		}

		100% {
			transform: scale(1)
		}
	}
</style>